<template>
	<view>
		<!-- 文章列表 -->
		<view class="list-box wid-100 white-bj pad-t-40 pad-b-40 box-sizing mar-top20" :style="{height:swiperHeight+'px'}">
			<scroll-view class="list center news-box" scroll-y @scrolltolower="loadMore">
				<block v-if="Articlelist.length>0">
					<view class="item-list" v-for="(item,index) in Articlelist" :key="index" @tap="open('news',item.id)">
						<view class="font-28 text-overflow">{{item.name}}</view>
						<view class="font-22 black60-zt mar-top20 text-overflow">{{item.subname}}</view>
						<view class="border-r-15 overflow-hidden mar-top20"><image :src="item.pic" mode="widthFix" lazy-load></image></view>
					</view>
					<!-- 上拉加载 -->
					<load-more :loadText="loadText"></load-more>
				</block>
				<block v-else>
					<!-- 无内容显示 -->
					<view class="nothing d-a-j">
						<image src="../../static/empty.png" mode="widthFix"></image>
						<view class="font-22 black60-zt text-center">没有更多记录...</view>
					</view>
				</block>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import loadMore from "@/pagesC/pages_com/load-more.vue"
	export default {
		components:{
			loadMore
		},
		data() {
			return {
				swiperHeight:500,
				count:0,
				loadText:"上拉加载更多",
				id:undefined,
				cate:[],
				Articlelist:[],
				query:{
					aid:1,
					cid:undefined,
					page: 1,
					limit: 10
				}
			}
		},
		onLoad(e) {
			this.id=parseFloat(e.id)
			this.query.cid=parseFloat(e.id)
			//获取列表的可视高度
			uni.getSystemInfo({
				success: (res) => {
					let height=res.windowHeight-uni.upx2px(20)  //获取可是窗口高度-tabbar的高度
					this.swiperHeight=height
				}
			});
			this.GetArticleList()
			this.getShow()
			//开启分享
			wx.showShareMenu({
				withShareTicket:true,
				menus:["shareAppMessage","shareTimeline"]
			})
		},
		//设置分享好友的内容
		onShareAppMessage(res) {
			if (res.from=="button"){
				console.log(res.target)
			}
			return {
				title:"鑫意到家",
				path: '/pages/index/index?rid=',
				desc:"鑫意到家 · 洁新留下！",
				imageUrl:"../../static/202310131154405365.png"
			}
		},
		//分享朋友圈
		onShareTimeline(res) {
			return {
				title: '鑫意到家 · 洁新留下！',
				type: 0,
				summary: "鑫意到家 · 洁新留下！",
			}
		},
		methods: {
			open(type,id,lei){
				getApp().open(type,id,lei)
			},
			//设置标题
			navTitle(str) {
				uni.setNavigationBarTitle({
					title: str
				})
			},
			//上拉加载事件
			async loadMore(){
				//判断如果文字不等于“上拉加载更多”，则不进行加载
				if(this.loadText!="上拉加载更多"){return}
				//改变加载时的文字
				this.loadText="努力加载中..."
				//模拟加载数据
				this.query.page++
				this.getShow()
			},
			//获取文章list
			async GetArticleList(){
				const one={
					aid:1,
					id:this.id
				}
				await this.$api.GetArticleCategoryList(one).then(res=>{
					this.cate=res.data.list
					this.navTitle(res.data.list[0].name)
				})
			},
			//获取余额明细
			async getShow(){
				await this.$api.ArticleList(this.query).then(res=>{
					if(res.code==0){
						this.Articlelist=[...this.Articlelist,...res.data.list]
						//计算是否还有
						let total_page=res.count/this.query.limit
						if(Number.isInteger(total_page)==true){
							total_page=total_page
						}else{
							total_page=Math.ceil(total_page)
						}
						if(this.query.page<total_page){
							this.loadText="上拉加载更多"
						}else{
							this.loadText="没有更多记录..."
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	body{
	    background-color: #f6f6f6;  
	} 
	image{
		width: 100%;
		display: block;
	}
	.banner{
		height: 220rpx;
	}
	.cate-box{
		white-space: nowrap;
		width: 100%;
		.item-cate{
			width: 200rpx;
			height: 200rpx;
			margin-right: 20rpx;
			&:last-child{
				margin-right: 0rpx;
			}
		}
	}
	.item-list{
		margin-bottom: 40rpx;
		&:last-child{
			margin-bottom: 0rpx;
		}
	}
	.nothing{
		image{
			width: 40%;
			margin: auto;
		}
	}
</style>